<!DOCTYPE html>
<html lang="en">

<head>
	<!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap-grid.css" rel="stylesheet"> -->
	<link href="./vendor/bootstrap-grid.css" rel="stylesheet">
	<meta charset="utf-8" />
	<link rel="apple-touch-icon" sizes="76x76" href="./assets/img/favicon.ico">
	<link rel="icon" type="image/png" href="./assets/img/favicon.ico">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>数据资产管理平台</title>
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
		  name='viewport' />

	<!-- Google Font -->
	<link href="./assets/layui/css/layui.css" rel="stylesheet">
	<!-- Font Awesome Icons -->
	<!-- <link rel="stylesheet" href="#" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> -->
	<!-- <link rel="stylesheet" href="#" crossorigin="anonymous"> -->
	<link rel="stylesheet" href="assets/font/iconfont.css">

	<!-- Main CSS -->
	<link href="./assets/css/main.css" rel="stylesheet" />

	<!-- Animation CSS -->
	<link href="vendor/aos.css" rel="stylesheet" />


	<style>
		.nav-item .active {
			font-weight: 600;
		}

		/* 修改header的样式 */
		.nav-link {
			color: #353c58 !important;
		}

		.navbar-dark .navbar-brand:hover,
		.navbar-dark .navbar-brand:focus {
			color: #FF6A00;
		}

		.btn-outline-white:hover {
			background-color: rgba(244, 244, 244, 0.7);
			border-color: #FF6A00 !important;
		}

		.navbar-dark .navbar-brand {
			color: #353c58;
		}

		.navbar {
			background-color: rgba(244, 244, 244, 0.5);
		}

		.nav-link.active {
			color: #FF6A00 !important;
		}

		.nav-link.active,
		.nav-link.active1 {
			color: #FF6A00 !important;
		}

		.page-item.active .page-link {
			z-index: 1;
			color: #fff;
			background-color: #FF6A00;
			border-color: #FF6A00;
		}

		/* end */

		.card {
			cursor: pointer;
		}
		.sonMenuItem{
			cursor: pointer;
		}
		.card-deck {
			margin-bottom: 15px;
		}

		.ServiceMenu .card-body {
			width: 80px;
			height: 80px;
			overflow: hidden;
			cursor: pointer;
			padding: 0 !important;
			flex: none;
			margin: 10px auto;
		}

		.fun-Directory {
			display: flex;
			flex-wrap: wrap;
		}

		.fun-Directory li {
			width: 16.6%;
		}

		.card-body ul li {
			margin-bottom: 0px !important;
		}

		h3 {
			font-size: 1rem !important;
		}

		.ServiceProduct .card,
		.ServiceMenu .card,
		.moreData .card {
			flex: none;
			width: 22.5% !important;
			margin-left: 1.25% !important;
			margin-right: 1.25% !important;
			margin-bottom: 20px;
		}

		/* 热门产品 */
		.hotProduct .card-header h3 {
			display: inline-block;
		}

		.hotProduct .card-header span {
			font-size: 12px;
			color: #FF6A00;
			margin-left: 10px;
			border: 1px solid #FF6A00;
			padding: 2px 4px;
		}

		/* 大于1680px:默认 */
		/* 1360px ——1680px */
		@media (max-width: 1680px) {

			.ServiceProduct .card,
			.ServiceMenu .card,
			.moreData .card {
				width: 22.5% !important;
				margin-left: 1.25% !important;
				margin-right: 1.25% !important;
			}
		}

		/* 1360px以下 */
		@media (max-width: 1360px) {

			.ServiceProduct .card,
			.ServiceMenu .card,
			.moreData .card {
				width: 30% !important;
				margin-left: 1.66% !important;
				margin-right: 1.66% !important;
			}

			.display-3 {
				font-size: 3.5rem;
			}
		}

		.searchform {
			float: right;
			width: 320px;
			margin-right: 0 !important;
			padding: 0;
			margin-top: 20px;
		}

		.searchform i {
			position: absolute;
			color: rgb(139, 139, 139);
			margin-top: 10.6px;
			margin-left: 10px;
		}

		.searchform input {
			padding-left: 32px;
			width: 305px;
			font-size: 14px;
		}

		.pagehelper {
			padding-top: 0 !important;
			margin-top: -50px;
			margin-bottom: 20px;
		}

		.nav-item .active1 {
			font-weight: 600;
			color: #0F74B5;
		}

		.searchbar {
			font-size: 15px;
			margin-bottom: 30px;
		}

		.searchbar span {
			line-height: 49.6px;
			font-size: 17px;
			color: #666666;
		}

		.searchbar .nav3 {
			width: 50%;
			float: left;
			margin-left: -16px;
			margin-top: 15px;
		}

		.searchbar a {
			color: #666666;
		}

		.searchbar a:hover {
			color: #0F74B5;
		}

		.searchform {
			float: right;
			width: 320px;
			margin-right: 0 !important;
			padding: 0;
			margin-top: 20px;
		}

		.searchform i {
			position: absolute;
			color: rgb(139, 139, 139);
			margin-top: 10.6px;
			margin-left: 10px;
		}

		/*.searchform input {*/
		/*	padding-left: 32px;*/
		/*	width: 305px;*/
		/*	font-size: 14px;*/
		/*}*/

		.searchHeaderBox {
			position: absolute;
			top: 83px;
			z-index: 1999;
			background-color: white;
			width: 400px;
			left: 856px;
			padding: 10px;
		}

		.searchHeaderBox .label {
			padding: 3px 8px;
			border: 1px solid #d8d8d8;
			margin-right: 12px;
			margin-bottom: 10px;
		}

		::-webkit-input-placeholder {
			/* WebKit browsers */
			color: #999;
			font-size: 14px;
		}

		::-moz-placeholder {
			/* Mozilla Firefox 19+ */
			color: #999;
			font-size: 14px;
		}

		:-ms-input-placeholder {
			/* Internet Explorer 10+ */
			color: #999;
			font-size: 14px;
		}
		/*星星样式*/
		.atar_Show{
			background:url(./assets/img/stark2.png);
			width:160px; height:21px;
			position:relative;
			float:left;
		}

		.atar_Show p{
			background:url(./assets/img/stars2.png);
			left:0;
			height:21px;
			width:124px;
		}
	</style>
</head>

<body>

<!----------------------------------------------------------------------
NAVBAR (remove topnav if you don't want changed nav background on scroll)
------------------------------------------------------------------------>
<nav class="topnav navbar navbar-expand-lg navbar-dark fixed-top">
	<div class="container-fluid">
		<a class="navbar-brand" href="./index.html"><i class="iconfont icon-globe1 mr-2" style="font-size: 20px;"></i><strong>数据资产管理</strong>
		</a>
		<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02"
				aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="navbar-collapse collapse" id="navbarColor02">
			<ul class="navbar-nav mr-auto d-flex align-items-center">
				<li class="nav-item">
					<a class="nav-link" href="./index.html">门户首页</a>
				</li>
				<li class="nav-item">
					<a class="nav-link active" href="#">公开数据</a>
				</li>
				<!--					<li class="nav-item dropdown">-->
				<!--						<a class="nav-link active" href="#">数据产品 </a>-->
				<!--					</li>-->
				<!--					<li class="nav-item">-->
				<!--						<a class="nav-link" href="./serviceStore.html">服务产品 </a>-->
				<!--					</li>-->
				<!--					<li class="nav-item">-->
				<!--						<a class="nav-link" href="./customShop.html">定制数据</a>-->
				<!--					</li>-->
				<li class="nav-item">
					<a class="nav-link" href="./developer.html">平台介绍</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="./newMessage.html">平台资讯</a>
				</li>
				<!--					<li class="nav-item">-->
				<!--						<a class="nav-link" href="./accessData.html">数据访问</a>-->
				<!--					</li>-->
<!--				<li class="nav-item highSerachBtn">-->
<!--					<div class="col pt-4 pb-4">-->
<!--						<a class="btn btn-lg btn-outline-white btn-round searchKeyword text-white"-->
<!--						   style="color: #353c58 !important;border-color: #353c58;"><span class="iconbox border-0"-->
<!--																						  style="margin-right: 5px;"><i class="iconfont icon-search"-->
<!--																														style="font-size: 20px;"></i></span>搜索</a>-->
<!--					</div>-->
<!--				</li>-->
			</ul>
			<ul class="navbar-nav ml-auto d-flex align-items-center">
				<!--					<li class="nav-item">-->
				<!--						<a class="nav-link  myBtn" href="#">-->
				<!--							<span class="iconbox border-0" style="margin-right: 5px;"><i-->
				<!--									class="iconfont icon-cart-arrow-down"></i></span>产品袋-->
				<!--						</a>-->
				<!--					</li>-->
<!--				<li class="nav-item">-->
<!--					<a class="nav-link" href="./mySpace.html">-->
<!--							<span class="iconbox border-0" style="margin-right: 5px;"><i-->
<!--									class="iconfont icon-bxs-book-reader"></i></span>用户中心 </a>-->
<!--				</li>-->
				<li class="nav-item">
					<a class="nav-link" href="./mySpace.html">
						<span class="iconbox border-0" style="margin-right: 5px;"><i class="iconfont icon-bxs-book-reader"></i></span>用户中心 </a>
				</li>
				<li class="nav-item disabledNone" id="userInfo">
					<ul class="layui-nav" style="background-color: rgba(244, 244, 244, 0);padding: 0;">
						<li class="layui-nav-item">
							<a href="javascript:;" style="color: #353c58 !important;">
								<span class="iconbox border-0" style="margin-right: 5px;"><i class="iconfont icon-user-fill"></i></span>
								用户：<span id="accunt">登录过期</span><span id="accountDisplay" style="margin-left: 10px;"></span>
							</a>
							<dl class="layui-nav-child">
								<dd><a href="./changePassword.html">修改密码</a></dd>
								<dd><a href="" id="logOutBtn">退出登录</a></dd>
							</dl>
						</li>
					</ul>
				</li>
				<li class="nav-item disabledNone" id="attestation">
					<a class="nav-link" style="color:#FF820C;padding-left: 0px;font-size:12px;cursor: pointer;">未认证</a>
				</li>
				<li class="nav-item disabledNone noUser">
					<a class="nav-link" href="./login.html">
							<span class="iconbox border-0" style="margin-right: 5px;"><i
									class="iconfont icon-user-fill"></i></span>登录 </a>
				</li>
				<li class="nav-item disabledNone noUser">
						<span class="nav-link" href="#">
							<a class="btn btn-success btn-round shadow-sm text-white" href="./register.html">
								<i class="iconfont icon-github"></i> 立即注册 <a href="#" class="downloadzip"
																				 class="hidden"></a>
							</a>
						</span>
				</li>
			</ul>
		</div>
	</div>
</nav>
<!-- End Navbar -->


<!------------------------------------- HEADER --------------------------------------->
<header>
	<div class="jumbotron jumbotron-lg jumbotron-fluid mb-0 pb-3 bg-primary position-relative"
		 style="background-color: #FF6A00 !important;">
		<div class="container-fluid text-white h-100">
			<div class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5">
				<div class="col pt-4 pb-4">
					<h1 class="display-3"><strong>公开数据</strong></h1>
					<h4 class="font-weight-light mb-4"><strong> 数据流通服务</strong><strong></strong></h4>
					<!-- <a href="#" class="btn btn-lg btn-outline-white btn-round">了解更多</a> -->
				</div>
				<div class="col align-self-bottom align-items-right text-right h-max-380 h-xl-560 position-relative z-index-1">
					<img src="./assets/img/demo/O1CN0561.jpg" class="rounded img-fluid" style="float: left;">
				</div>
			</div>
		</div>
	</div>
</header>
<!--- END HEADER -->

<main class="container">
	<!--		PRICING 菜单项-->
	<section class="pt-4 pb-5" data-aos="fade-up">
		<h3 class="h5 mb-4 font-weight-bold">数据分类</h3>
		<div class="card-deck card-pricing text-center ServiceMenu">
		</div>
		<div class="card-deck card-pricing text-center moreData">
		</div>
		<div class="card-deck card-pricing text-center sonMenu">
		</div>
	</section>
	<!-------------------------------------- PRICING 菜单项 --------------------------------------->
	<!--		<section class="mt-5 pt-1 pb-2 pl-2 pr-2" data-aos="fade-up" style="background-color: #F5F7FA;">-->
	<!--			<h3 class="h5 mt-4 font-weight-bold">数据产品分类</h3>-->
	<!--			<div class="card-deck card-pricing text-center">-->
	<!--				<div class="info border-0 shadow-sm" style="margin-left:15px;">-->
	<!--					<div class="card-header border-0 pt-2 pb-2 active">-->
	<!--						<h3 class="my-0 font-weight-normal">在线产品</h3>-->
	<!--					</div>-->
	<!--				</div>-->
	<!--				<div class="info border-0 shadow-sm" style="margin-left:15px;">-->
	<!--					<div class="card-header border-0 pt-2 pb-2">-->
	<!--						<h3 class="my-0 font-weight-normal">离线产品</h3>-->
	<!--					</div>-->
	<!--				</div>-->
	<!--				<div class="info border-0 shadow-sm" style="margin-left:15px;">-->
	<!--					<div class="card-header border-0 pt-2 pb-2">-->
	<!--						<h3 class="my-0 font-weight-normal">套餐产品</h3>-->
	<!--					</div>-->
	<!--				</div>-->
	<!--			</div>-->
	<!--			<h3 class="h5 mt-4 font-weight-bold">使用分类</h3>-->
	<!--			<div class="card-deck card-pricing text-center serviceMenu">-->
	<!--			</div>-->
	<!--			<h3 class="h5 mt-4 font-weight-bold">子级分类</h3>-->
	<!--			<div class="card-deck card-pricing text-center moreData">-->
	<!--&lt;!&ndash;				更多&ndash;&gt;-->
	<!--			</div>-->
	<!--			<div class="card-deck card-pricing text-center sonMenu">-->
	<!--&lt;!&ndash;				子级分类&ndash;&gt;-->
	<!--			</div>-->
	<!--		</section>-->

	<!-------------------------------------- PRICING --------------------------------------->
	<section class="pt-4 pb-5" data-aos="fade-up">
		<h3 class="h5 mb-4 font-weight-bold" id="resourcesTypeTitle">气象气候</h3>
		<!-- 搜索 -->
		<div class="searchbar">
			<ul class="nav nav3">
				<li class="nav-item">
					<a class="nav-link active1" href="#">综合排序</a>
				</li><span>|</span>
				<li class="nav-item">
					<a class="nav-link" href="#">最近更新</a>
				</li><span>|</span>
				<li class="nav-item">
					<a class="nav-link" href="#">最高人气</a>
				</li><span>|</span>
				<li class="nav-item">
					<a class="nav-link" href="#">最好评价</a>
				</li>
			</ul>
			<div class="form-group searchform" style="display: -webkit-inline-box;width: 500px;">
				<div class="col-sm-10">
					<i class="iconfont icon-search"></i>
					<input type="search" id="input" class="form-control" value="" placeholder="请输入关键字搜索产品">
				</div>
				<div style="float: right">
					<button id="searchBtn" class="btn btn-primary" style="background-color:#FF6A00 ;border: none">搜索</button>
					<button id="resetBtn" class="btn btn-secondary" style="background-color:#FF6A00 ;border: none">重置</button>
				</div>

			</div>

			<div style="clear: both;"></div>
		</div>
		<!--			产品列表展示-->
		<div class="card-deck card-pricing ServiceProduct hotProduct">

		</div>
	</section>
	<!-- 分页 -->
	<section class="pt-4 pb-5 pagehelper" data-aos="fade-up">
		<!--			<nav aria-label="Page navigation example" style="float: right;">-->
		<!--				<ul class="pagination">-->
		<!--					<li class="page-item">-->
		<!--						<a class="page-link" href="#" aria-label="Previous">-->
		<!--							<span aria-hidden="true">&laquo;</span>-->
		<!--						</a>-->
		<!--					</li>-->
		<!--					<li class="page-item active"><a class="page-link" href="#">1</a></li>-->
		<!--					<li class="page-item">-->
		<!--						<a class="page-link" href="#" aria-label="Next">-->
		<!--							<span aria-hidden="true">&raquo;</span>-->
		<!--						</a>-->
		<!--					</li>-->
		<!--				</ul>-->
		<!--			</nav>-->
		<div id="productPage" style="float: right;"></div>
	</section>

</main>

<!-------------------------------------- FOOTER 底部 --------------------------------------->
<footer class="bg-black pb-5" style="padding-top: 20px;padding-bottom: 20px !important;background-color: #FF6A00;">
	<div class="container">
		<div class="row" style="text-align: center;">
			<div class="col-12 col-md mr-4">
				<small class="d-block mt-3 text-muted" style="color: white !important;">
					<p style="color: white;margin-top: 10px;font-size: 30px;">数据资产管理平台</p>
					Copyright @ 2022 数据资产管理平台-版权所有 蜀ICP备202223603号
				</small>
				<small class="d-block mt-3 text-muted" style="color: white !important;">
					<a href="./legal.html" style="color: white;">隐私政策</a> |
					<a href="./legal.html" style="color: white;">服务条款</a> |
					<a href="./legal.html" style="color: white;">版权声明</a>
				</small>
			</div>
		</div>
	</div>
</footer>




<!-------------------------------------- JAVASCRIPTS --------------------------------------->
<script src="vendor/jquery.min.js" type="text/javascript"></script>
<script src="vendor/popper.min.js" type="text/javascript"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="vendor/share.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/js/bootstrap.bundle.js"></script> -->
<script src="./vendor/bootstrap.bundle.js"></script>
<script src="./assets/layui/layui.js" type="text/javascript"></script>
<script src="js/tool.js" type="text/javascript"></script>
<script src="assets/font/iconfont.js" type="text/javascript"></script>
<script src="js/header.js" type="text/javascript"></script>

<!-- tab事件-->
<script>
	$(function () {
		$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
			// 获取已激活的标签页的名称
			var activeTab = $(e.target).text();
			// 获取前一个激活的标签页的名称
			var previousTab = $(e.relatedTarget).text();
			$(".active-tab span").html(activeTab);
			$(".previous-tab span").html(previousTab);
		});
	});
</script>
<!-- Animation -->
<script src="vendor/aos.js" type="text/javascript"></script>
<noscript>
	<style>
		*[data-aos] {
			display: block !important;
			opacity: 1 !important;
			visibility: visible !important;
		}
	</style>
</noscript>
<script>
	AOS.init({
		duration: 700
	});
</script>

<!-- Disable animation on less than 1200px, change value if you like -->
<script>
	AOS.init({
		disable: function () {
			var maxWidth = 1200;
			return window.innerWidth < maxWidth;
		}
	});
</script>

<!-- Carousel Height Smooth -->
<!-- <script>
$('.carousel').on('slide.bs.carousel', function (event) {
  var height = $(event.relatedTarget).height();
  var $innerCarousel = $(event.target).find('.carousel-inner');
  $innerCarousel.animate({
    height: height
  });
});
</script> -->

<!-- Popovers -->
<script>
	$(function () {
		$('[data-toggle="popover"]').popover()
	})
	$('.popover-dismiss').popover({
		trigger: 'focus'
	})
</script>

<!-- Tooltips -->
<script>
	$(function () {
		$('[data-toggle="tooltip"]').tooltip()
	})
</script>
<script src="./js/productStore.js" type="text/javascript"></script>

</body>

</html>
